<template>
  <HeaderLayout
    title = '会议简介'

    @click-left = 'handleBack'
  >
    <Banner />

    <div class="h1">{{ title }}</div>

    <div class="list">
      <div class="list-item"><Icon type = 'shijian' /><span>{{ timeFormat }}</span></div>
      <div class="list-item"><Icon type = 'didian' /><span>{{ location }}</span></div>
      <div class="list-item"><Icon type = 'renyuanzuguanli' /><span>{{ type }}（规模{{ member }}人）</span></div>
    </div>

    <div class="panel">
      <div class="panel-header"><h2>会议介绍</h2></div>
      <div class="panel-body">
        <p>{{ content }}</p>
      </div>
    </div>

    <div class="footer" slot = 'footer'>
      <Button type = 'primary' plain class="collect">收藏</Button>
      <Button type = 'primary' class="join" @click="handleJoin">报名参会</Button>
    </div>
  </HeaderLayout>
</template>

<script>

import moment from 'moment'

import { Button } from 'vant'
import Icon from '@/component/icon/index.vue'
import Banner from '@/component/banner/index.vue'
import HeaderLayout from '@/layout/headerLayout/index.vue'

export default {

  name: 'index',

  data () {
    return {
      title: '第二届中国医师协会神经介入年会',

      startTime: new Date(),
      endTime: new Date(),
      location: '广州南丰朗豪酒店',
      type: '专题研讨会',
      member: 300,

      content: '内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容'
    }
  },

  computed: {
    timeFormat: function () {
      return moment(this.startTime).format('YYYY年MM月DD日HH:mm-').concat(moment(this.startTime).format('MM月DD日HH:mm'))
    }
  },

  methods: {
    handleClick: function (e) {
      console.log(e)
    },
    handleBack: function (e) {
      console.log('back')
    },
    handleJoin: function (e) {
      this.$router.push('/reg')
    }
  },

  components: {
    HeaderLayout,
    Icon,
    Button,
    Banner,
  }
}
</script>

<style lang='less' scoped>
  @import '../../less/mixin.less';

  .h1 {
    background: #fff;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    padding: 13px 15px;
    line-height: 1.35;
  }

  .list {
    position: relative;
    background-color: #fff;
    margin-bottom: 5px;

    &-item {
      display: flex;
      padding: 0 14px;
      align-items: center;
      min-width: 0;
      position: relative;
      height: 38px;

      .hairline(bottom, #eef0f3);

      &:last-child {
        .hairline-remove(bottom);
      }

      i {
        flex-shrink: 0;
        font-size: 16px;
        color: #747474;
        margin-right: 10px;
      }

      span {
        font-size: 11px;
        color: #4c4c4c;

        .text-overflow();
      }
    }
  }

  .panel {
    position: relative;
    margin-bottom: 12px;

    &-header {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      height: 40px;
      border-bottom: 1px solid #eeeff3;

      h2 {
        margin: 0;
        padding: 0;
        font-weight: normal;
        font-size: 12px;
        color: #262626;
        min-width: 0;

        .text-overflow();
      }

      &:before {
        content: '';
        position: absolute;
        height: 26px;
        width: 2px;
        background-color: #008CC9;
        top: 50%;
        left: 0;
        margin-top: -13px;
      }
    }

    &-body {
      background-color: #fff;
      padding: 16px 20px;

      p {
        line-height: 1.7;
        font-size: 11px;
        color: #737373;
      }
    }
  }

  .footer {
    display: flex;
    background: #fff;
    position: relative;
    padding: 0 6px;
    height: 49px;
    justify-content: space-around;
    align-items: center;
    box-shadow:0px -3px 5px rgba(0,0,0,0.05);

    /deep/ .van-button {
      background-color: #008CC9;
      border-color: #008CC9;
      height: 36px;
      line-height: 34px;
      border-radius: 3px;
      flex-shrink: 0;

      &.van-button--plain {
        color: #008CC9;
        background-color: transparent;
      }

      &.van-button--disabled {
        background-color: #e8e8e8 !important;
        color: #999 !important;
        border-color: #e5e5e5 !important;
      }
    }

    .collect {
      width: 88px;
      margin-right: 5px;
    }

    .join {
      flex-grow: 1;
    }
  }
</style>
